<template>
  <div class="plugin-reports-info">
    <div class="bar">
      <div class="right" v-if="!loading">
        <t-button v-if="progress == 100" @click="onUpdate" style="float: right; margin-left: 10px">
          <template #icon><t-icon name="collection" /></template>
          {{ plugin.t('update') }}
        </t-button>
        <t-progress 
          v-else
          :percentage="progress" 
          :label="false" 
          status="active" 
          style="width: 100px; float: right; margin: 13px 0 0 10px;" 
        />
        <t-cascader
          v-model="query.where"
          :options="query.options"
          style="width: 200px; float: right; margin-left: 10px"
        />
        <t-date-picker 
          v-if="query.where == 'day'"
          v-model="query.day"
          valueType="Date"
          :disable-date="query.time" 
          :format="app.time.format()"
          style="width: 150px; float: right; margin-left: 10px" 
        />
      </div>
      <div class="title">
        <t-button theme="default" shape="square" style="margin-right: 10px" @click="$router.back()">
          <template #icon><t-icon name="arrow-left" /></template>
        </t-button> 
        {{ time }} {{ plugin.t('form.type_text.' + type) }}
      </div>
    </div>
    <t-skeleton :loading="loading" animation="gradient" :rowCol="
    [
      [
        {width: '25%', height: '150px', type: 'rect'}, 
        {width: '25%', height: '150px', type: 'rect'}, 
        {width: '25%', height: '150px', type: 'rect'}, 
        {width: '25%', height: '150px', type: 'rect'}
      ],
      {width: '100%', height: '400px', type: 'rect'},
    ]">
      <div class="box">
        <Components :factory="factory" :query="query" />
      </div>
    </t-skeleton>
  </div>
</template>
<script setup>
  import { ref, reactive } from 'vue'
  import { useRoute } from 'vue-router'
  import app from '@/app'
  import index from '../index'
  import createFactory from '../common'
  import Components from './components.vue'

  const plugin = index.plugin
  const route = useRoute()
  const loading = ref(true)
  const progress = ref(100)
  const type = route.params.type
  const time = route.params.time

  // 加载报告工厂
  const factory = createFactory(type, time)

  // 查询条件
  const query = reactive({
    options: {},
    where: 'year',
    time: {},
    day: null
  })

  // 加载条件
  const loadQuery = () => {
    query.options = [{
      label: plugin.t('info.options.year'),
      value: 'year',
    }, {
      label: plugin.t('info.options.quarter'),
      value: 'quarter',
      children: plugin.tm('info.quarter').map((label, value) => {
        return {
          label, 
          value: 'quarter-' + value,
          disabled: !factory.quarter[value]
        }
      })
    }, {
      label: plugin.t('info.options.month'),
      value: 'month',
      children: plugin.tm('info.month').map((label, value) => {
        return {
          label, 
          value: 'month-' + value,
          disabled: !factory.month[value]
        }
      })
    }, {
      label: plugin.t('info.options.day'),
      value: 'day'
    }]

    // 日期选择器年区间。要少1秒，不然多一天
    query.time = { 
      before: factory.startTime().toDate(), 
      after: factory.endTime().subSecond(1).toDate() 
    }
    query.day = query.time.after
  }

  // 更新分析
  const onUpdate = async () => {
    progress.value = 0
    await factory.pull((total, index) => {
      progress.value = parseInt(index / total * 100)
    })

    app.message('success', 'message.update')

    // 加载条件
    loadQuery()
  }

  // 加载数据
  factory.get().then(() => {
    setTimeout(() => loading.value = false, 3000)

    // 加载条件
    loadQuery()
  })

</script>
<style lang="scss">
@import '@/style/global';
  .plugin-reports-info{
    .title{
      line-height: 1;
      height: 40px;
      color: $color-title;
      font-size: 16px;
      font-weight: bold;
    }
    .right{
      float: right
    }
  }
</style>